<script setup lang="ts">
  import {
    addPatientItemAPI,
    delPatientItemAPI,
    editPatientItemAPI,
    lookPatientItemAPI,
  } from '@/api/archive'
  import type { PatientAdd, PatientLook } from '@/types/archive'
  import { onLoad } from '@dcloudio/uni-app'
  import type { SwitchOnChangeEvent } from '@uni-helper/uni-app-types/index'
  import { ref } from 'vue'

  onLoad(async (options) => {
    // const editId = ref<string>(options?.id)
    if (options?.id) {
      patientItem.value = await lookPatientItemAPI(options?.id)
    }

    // console.log(patientItem.value)
  })
  const patientItem = ref<PatientLook>({
    defaultFlag: 0,
    idCard: '',
    name: '',
  } as PatientLook)
  const formRef = ref()
  const patientRules = {
    name: {
      rules: [
        {
          required: true,
          errorMessage: '请输入患者姓名',
        },
        {
          pattern: /^[\u4e00-\u9fa5]{2,4}$/,
          errorMessage: '姓名格式2~4个汉字',
        },
      ],
    },
    idCard: {
      rules: [
        {
          required: true,
          errorMessage: '请输入身份证号码',
        },
        {
          pattern: /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[0-9Xx]$/,
          errorMessage: '身份证格式不正确',
        },
      ],
    },
    gender: {
      rules: [
        { required: true, errorMessage: '请勾选患者性别' },
        {
          // 自定义校验规则
          validateFunction: (
            rule: any,
            value: number,
            data: any,
            callback: (arg0: string) => void
          ) => {
            // 判断身份证第 17 位(索引为16)是否与选择的性别一致
            if (Number(patientItem.value.idCard.charAt(16)) % 2 !== value) {
              // callback 处理提示错误信息
              callback('选择的性别与身份号中性别不一致')
              return
            }
            // 验证通过返回 true
            return true
          },
        },
      ],
    },
  }
  const nameRules = async () => {
    await formRef.value.validateField('name')
  }
  const idCardRules = async () => {
    await formRef.value.validateField('idCard')
  }
  const switchChange = (e: SwitchOnChangeEvent) => {
    patientItem.value.defaultFlag = e.detail.value ? 1 : 0
  }
  const btnSave = async () => {
    console.log(patientItem.value)

    await formRef.value.validate()
    if (patientItem.value.id) {
      const { genderValue, age, ...newPatientItem } = patientItem.value
      await editPatientItemAPI(newPatientItem)
      uni.showToast({
        title: '修改成功',
      })
    } else {
      await addPatientItemAPI(patientItem.value)
      uni.showToast({
        title: '保存成功',
      })
    }

    uni.navigateBack()
  }
  const btnDel = async () => {
    await delPatientItemAPI(patientItem.value.id)
    uni.navigateBack()
  }
</script>

<template>
  <scroll-page>
    <view class="archive-page">
      <uni-forms
        border
        label-width="220rpx"
        ref="formRef"
        :model="patientItem"
        :rules="patientRules"
      >
        <uni-forms-item label="患者姓名" name="name">
          <uni-easyinput
            placeholder-style="color: #C3C3C5; font-size: 32rpx"
            :styles="{ color: '#121826' }"
            :input-border="false"
            :clearable="false"
            placeholder="请填写真实姓名"
            v-model="patientItem.name"
            v-on:blur="nameRules"
          />
        </uni-forms-item>
        <uni-forms-item label="患者身份证号" name="idCard">
          <uni-easyinput
            placeholder-style="color: #C3C3C5; font-size: 32rpx"
            :styles="{ color: '#121826' }"
            :input-border="false"
            :clearable="false"
            placeholder="请填写身份证号"
            v-model="patientItem.idCard"
            v-on:blur="idCardRules"
          />
        </uni-forms-item>
        <uni-forms-item label="患者性别" name="gender">
          <uni-data-checkbox
            selectedColor="#16C2A3"
            v-model="patientItem.gender"
            :localdata="[
              { text: '男', value: 1 },
              { text: '女', value: 0 },
            ]"
          />
        </uni-forms-item>
        <uni-forms-item label="默认就诊人" name="defaultFlag">
          <view class="uni-switch">
            <switch
              color="#20c6b2"
              style="transform: scale(0.7)"
              :checked="!!patientItem.defaultFlag"
              @change="switchChange"
            />
          </view>
        </uni-forms-item>
        <button class="uni-button" @click="btnSave">保存</button>
        <button
          class="uni-button"
          style="background-color: red"
          @click="btnDel"
          v-if="!!patientItem.id"
        >
          删除
        </button>
      </uni-forms>
    </view>
  </scroll-page>
</template>

<style lang="scss">
  @import './index.scss';
</style>
